<template>
  <div class="app-container">
    <div class="back">
      <i
        class="el-icon-arrow-left"
        style="color: #4b6eef"
        @click="$router.go(-1)"
      >返回</i>
      |
      <span style="color: #505255">设定优先级</span>
    </div>
    <div class="box-wk">
      <div class="box">
        <div class="title">基础信息</div>
        <div class="box-content">
          <noStyleDetail
            :details-list="detailsList"
            :form-data="formData"
          />
        </div>
      </div>
      <div class="box">
        <settings ref="settingsRef" />
      </div>
    </div>
    <div class="app-footer">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import noStyleDetail from '@/components/HkDetails/noStyleDetail'
import settings from './components/settings.vue'
import { setPriority } from '@/api/basicConfig/serviceConfig'
export default {
  components: { noStyleDetail, settings },
  beforeRouteLeave(to, from, next) {
    if (to.path.includes('/bpmn/service/list')) {
      to.meta.keepAlive = true
    }
    next()
  },
  data() {
    return {
      detailsList: [
        {
          label: '服务',
          field: 'flowName',
          span: 24
        },
        {
          label: '描述',
          field: 'description',
          span: 24
        }
      ],
      formData: {}
    }
  },
  mounted() {
    if (this.$route.query) {
      this.formData = {
        ...this.$route.query
      }
    }
  },
  methods: {
    //  保存按钮
    async handleSubmit() {
      const res = await this.$refs.settingsRef.handleSubmit()
      const _self = this
      setPriority({ ...res, id: this.$route.query.id }).then(res => {
        _self.$message.success('保存成功')
        this.$router.go(-1)
      })
    },
    //  关闭
    handleClose() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
#app.dark-theme{
  .box,.el-collapse-item__header{
    background:rgba(59,139,255,.1) !important;
  }
  .content{
    border:1px solid rgba(59,139,255,.4) !important;
  }
}
.app-container {
  height:100%;
  background: #f3f5f6 !important;
  display:flex;
  flex-direction: column;
}
.back {
  padding-bottom: 20px;
}
.box-wk{
  flex:1;
  overflow: auto;
  .box {
  background: #fff;
  margin-bottom: 20px;
  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}
}
.app-footer{
  text-align: right;
  padding-top:20px;
}
.title {
  margin-bottom: 10px;
}
</style>
